<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>丹棱-耙耙柑</title>
    <link rel="stylesheet" type="text/css" href="../hui/css/hui.css" />
</head>
<body style="background:#F4F5F6;">
<!--<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI </h1>
</header>-->
<div class="hui-wrap">
    <div class="hui-center-title"><a href="fruit.html"><h1>耙耙柑(跳转)</h1></a></div>
    <div style="padding:10px 0px;" id="HUI_Waterfall"></div>
    <div class="hui-content" style="padding:10px;">
        <h2>耙耙柑的营养价值</h2>
        <p>耙耙柑果肉可溶性固形物14.5%，可食率76.64%，富含人体所需的维C、铁、钙、磷、柠檬酸、胡萝卜素等微量元素，维生素C每100克含30.5毫克，含热量、碳水化合物、脂肪、蛋白质、纤维素、营养价值比同类水果高出很多。有生津止渴，化痰理气，具有高营养值，高药用价值。</p>

        <h2>耙耙柑的作用与功效</h2>
        <p>【性味】味甘、酸，性凉。 【归经】脾、胃、膀胱经。</p>
        <p>【功效】生津止渴、开胃下气，可解油腻、消积食、止渴、醒酒。</p>
    </div>
</div>
<script type="text/javascript" charset="UTF-8" src="../hui/js/hui.js"></script>
<script type="text/javascript" charset="UTF-8" src="../hui/js/hui-water-fall.js"></script>
<script type="text/javascript" charset="UTF-8" src="../hui/js/hui-refresh-load-more.js"></script>

<!-- 使用 phoneSwipe 插件完成图片预览 -->
<!-- 引用 phoneSwipe 插件依赖的 css 及 js -->
<script type="text/javascript" src="../hui/plug-ins/phoneswipe/photoswipe.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../hui/plug-ins/phoneswipe/photoswipe-ui-default.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="../hui/plug-ins/phoneswipe/photoswipe.css" type="text/css" />
<!-- 以下为 phoneSwipe 插件 dom 复制即可 -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container" style="overflow:visible;">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="关闭"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //第一步 初始化瀑布流dom布局
    var Waterfall = new huiWaterfall('#HUI_Waterfall');
    /*
     * 第二步 使用waterfall对象的 addItems()函数为瀑布流增加内容
     * 一般情况下瀑布流内的内容会通过远程服务器获取，hui支持的瀑布流内容格式为：
     * <div class="hui-water-items">
     *     <a herf="hui.toast('您的链接');">
     *         <div><img src="图片地址" /></div>
     *         <div class="hui-water-items-text">文本</div>
     *     </a>
     * </div>
     * 后端服务器重复输出以上dom结构内容即可，支持使用上拉加载更多，加载后再次调用addItems()函数即可。
     * 以下是一个模拟的例子
     */
    var data = new Array();
    for(var i = 1; i <= 8; i++){
        data.push({img : '../imgs/'+i+'.jpg', title : ''});
    }
    var page = 1;
    getList();
    //模拟远程获取数据 随机对数据进行排序
    function getList(){
        data.shuffle(); //随机对数据进行排序
        //组合dom
        var str = '';
        for(var i = 0; i < data.length; i++){
            str += '<div class="hui-water-items">'+
                        '<div class="hui-water-items-img"><img src="'+data[i].img+'" class="imgs" value="'+i+'"/></div>'
                        //'<div class="hui-water-items-text">测试</div>';//+
                    '</div>';
        }
        Waterfall.addItems(str);
        /*if(page == 4){
            hui.endLoadMore(true);
        }else{
            hui.endLoadMore();
        }
        page++;*/
    }
    //hui.loadMore(getList);

    //js 调用插件
    hui('.imgs').click(function(){
        var index = hui(this).index();
        previewImg(index);
    });
    function previewImg(index){
        var pswpElement = document.querySelectorAll('.pswp')[0];
        var items = [];
        //获取图片数据并填充近数组
        hui('.imgs').each(function(eimg){
            var imgObj = {src:eimg.getAttribute('src'), w:eimg.naturalWidth, h:eimg.naturalHeight};
            items.push(imgObj);
        });
        var options = {index: index};
        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    }
</script>
</body>
</html>